import { Button, Col, Modal, Row } from "antd";
import { ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons'
import React, { useEffect, useRef } from "react";
import Cropper, { ReactCropperElement } from "react-cropper";
import "cropperjs/dist/cropper.css";
import { request } from "@/utils";
import  "./cropperAvatar.less";

const CropperAvatar = (props: any) => {
    const { open, avatarFile, onClose } = props;
    const cropperRef = useRef<ReactCropperElement>(null);

    useEffect(() => {
        if(!avatarFile) return;

        let { file } = avatarFile;
        const cropper = cropperRef.current?.cropper;
        const done = (url: string) => {
            cropper?.replace(url)
        }

        if (file) {
            if (URL) {
                done(URL.createObjectURL(file));
            } else if (FileReader) {
                let reader = new FileReader();
                reader.onload = function (event) {
                    done(event.target?.result as string)
                };
                reader.readAsDataURL(file);
            }
        }

        return () => {
            let cropper = cropperRef.current?.cropper;
            cropper?.destroy();
            cropper = undefined;
        }
       
    }, [avatarFile])



    const onOk = async () => {
        const cropper = cropperRef.current?.cropper;
        const { file, onSuccess, onError } = avatarFile;
        if (cropper) {
            let canvas = cropper.getCroppedCanvas({
                width: 200,
                height: 200,
            });
            
            canvas.toBlob(function (blob) {
                const formData = new FormData();
                formData.append('file', blob!, file.name)
                const uploadUrl = '/common/upload/img?checkWidth=200&checkHeight=200';
                request(uploadUrl, {
                    method: 'POST',
                    data: formData
                }).then(res => {
                    onSuccess(res);
                    onCancel();
                }).catch(err => {
                    onError(err)
                })
            })
        }
    }

    const onCancel = () => {
        onClose();
    }

    const onImageZoom = (zoomValue: number) => {
        let cropper = cropperRef.current?.cropper;
        cropper?.zoom(zoomValue)
    }

    return (
        <Modal
            open={open}
            title='上传头像'
            onOk={onOk}
            onCancel={onCancel}
        >
            <Cropper
                src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
                style={{ height: 320, width: "100%" }}
                // Cropper.js options
                aspectRatio={1 / 1}
                viewMode={1}
                cropBoxMovable={false}
                cropBoxResizable={false}
                dragMode={'move'}
                guides={false}
                ref={cropperRef}
                scalable={false}
                autoCropArea={0.625}

            />
            <Row justify='center' style={{ marginTop: '12px' }}>
                <Col>
                    <Button shape="circle" icon={<ZoomInOutlined />} size="large" type='primary' onClick={ () => onImageZoom(0.1) } />    
                    <Button shape="circle" icon={<ZoomOutOutlined />} size="large" type='primary'  onClick={ () => onImageZoom(-0.1) }  />    
                </Col>
            </Row>
        </Modal>
    )
}

export default CropperAvatar;

